<template>
  <div v-if="type === 'implements'" ref="getReceiveInfo" class="mainDetails">
    <el-container>
      <el-main class="mainDetails">
        <!-- 页面主体内容 -->

        <div class="content-box">
          <div v-if="!!query.subType" class="operation-wrapper">
            <div class="position-abs abs-right">
              <!-- <el-button
                class="pms-button-primary mr-5"
                @click="
                  handleMaterialApplication(
                    'application',
                    '物资申领'
                  )
                "
              >申领</el-button>
              <el-button
                class="pms-button-primary"
                @click="
                  handleMaterialApplication(
                    'remove',
                    '物资退库'
                  )
                "
              >退库</el-button> -->
              <el-button class="pms-button-primary" @click="upNewPage(true)">申领/退库</el-button>
              <el-button class="pms-button-primary" @click="upNewPage(false)">资源录入</el-button>
            </div>
          </div>
          <material-detail ref="materialDetail" @pagination="pagination" />
        </div>
      </el-main>
      <!-- 物资申领操作弹框 -->
      <el-dialog
        v-if="materialsApplicationVisible"
        ref="materialsApplicationRef"
        v-dialogDrag
        :visible.sync="materialsApplicationVisible"
        width="90%"
        style="margin-top: 200px"
      >
        <div slot="title" class="dialog-header">{{ title }}</div>
        <materials-application
          v-if="componentsType === 'application'"
          ref="materialsApplication"
          :flag="applicationDialogFlag"
          :note.sync="note"
          :receive-details-data="receiveDetailsData"
          @doSaveApplyBySite="queryReceiveDetails"
        />
        <update-remove-type
          v-if="componentsType === 'remove'"
          :prj-params="prjParams"
          :table-data="updateRemoveData"
          :flag="applicationDialogFlag"
        />
      </el-dialog>
    </el-container>
  </div>
  <div v-else ref="getReceiveInfo">
    <el-container class="mainDetails">
      <el-main>
        <!-- 页面主体内容 -->
        <el-collapse v-if="type === 'back'" v-model="logisticsName">
          <el-collapse-item name="removeMaterialApply">
            <div class="content-box">
              <div class="table-name-content">物资领用详情</div>
              <update-remove-type :prj-params="prjParams" />
            </div>
          </el-collapse-item>
        </el-collapse>
        <el-collapse v-if="type === 'detail'" v-model="logisticsName">
          <el-collapse-item name="removeMaterialInfo">
            <template slot="title">
              <i class="item_icon" />出库明细单
              <span class="ml-5 font-remove-weight">{{
                projectInfo.projectName
              }}</span>
              【
              <span class="font-remove-weight">{{
                projectInfo.prjCode
              }}</span>
              】
            </template>
            <div class="content-box">
              <update-remove-type
                :table-data="updateRemoveData"
                :prj-params="prjParams"
                @search="handleSearch"
                @removeMaterial="handleRemoveMaterial"
              />
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-main>
    </el-container>
  </div>
</template>

<script>
// import HeaderTitle from '@/components/basic/HeaderTitle'
import materialDetail from './components/materialDetail.vue'
import updateRemoveType from './components/updateRemoveType.vue'
import {
  queryOsList,
  queryReceiveDetails,
  implementReceiveList,
  queryOsListWhole
} from '@/api/material'
import materialsApplication from '@/views/material/components/materialsApplication'
import { getQueryObject } from '@/utils'
import { newOpenPostWindow } from '@/utils/newRequestCommonFormjs'
// import { disableScroll } from '@/utils'
import {
  getGoToMateDevelopmentApi
} from '@/api/acceptance'
export default {
  name: 'AcceptMangeDetail',
  components: {
    // removeMaterialsDetails,
    // HeaderTitle,
    materialDetail,
    // materialsInfoList,
    updateRemoveType,
    materialsApplication
  },
  data() {
    return {
      headerTitle: '物资退库',
      activeNames: [],
      childData: {},
      buttonDisable: ['doNext'],
      selectList: {},
      detailData: {},
      logisticsName: ['removeMaterialInfo', 'removeMaterialApply'],
      updateRemoveData: [], // 出库明细单表格数据
      type: 'detail',
      projectInfo: {
        projectName: '',
        prjCode: ''
      },
      materialsApplicationVisible: false,
      title: '物资申领',
      componentsType: '',
      applicationDialogFlag: 0,
      receiveDetailsData: {},
      note: '',
      implementsTitle: '物资退库申请单',
      prjParams: {}
    }
  },
  computed: {
    query() {
      return this.$route.query
    },
    queryWorkItemId() {
      return this.$route.query.workItemId
    },
    typeTodo() {
      return this.$route.query.typeTodo
    }
  },
  watch: {},
  created() {
    this.prjParams = getQueryObject()
  },
  async mounted() {
    this.type = this.query.pageType || 'implements'
    const prjId = this.query.prjId
    this.queryReceiveDetails(prjId)
    if (this.query.subType === 'receive') {
      this.implementsTitle = '物资申领信息'
    }
    if (this.query.manageMode === '03' || this.query.manageMode === '04') {
      const res = await queryOsListWhole({ prjId })
      if (+res.code === 200) {
        this.updateRemoveData = res.data?.osData
      }
    } else {
      const res = await queryOsList({ prjId })
      if (+res.code === 200) {
        this.updateRemoveData = res.data?.osData || []
      }
    }
    if (this.type === 'implements') {
      await this.implementReceiveList({ prjId: prjId, page: 1, pageSize: 10 })
    }
  },
  methods: {
    async upNewPage(type) {
      // const params = {
      //   prjId: this.query.prjId
      // }
      // 跳转到申领退库
      if (type) {
        window.open(`${process.env.VUE_APP_ZHONGRUAN_URL}materialsApplicant?prjId=${this.query.prjId}`)
      } else {
        // 资源录入
        const res = await getGoToMateDevelopmentApi(this.query.prjId)
        if (+res?.code === 200) {
          const params = {}
          params.pwdaToken = res.data.pwdaToken
          params.acctId = res.data.acctId
          newOpenPostWindow(res.data.jumpUrl, {}, res.data.isNew)
        }
      }
    },
    pagination(params) {
      this.implementReceiveList({ prjId: this.query.prjId, page: params.page, pageNum: params.limit })
    },
    // 物资申领信息接口获取表格数据
    async implementReceiveList({ prjId, page = 1, pageSize = 10 }) {
      const resImplements = await implementReceiveList({ prjId, beginNum: page, pageNum: pageSize })
      this.$refs.materialDetail.fileData = resImplements.data?.list || []
      this.$refs.materialDetail.total = resImplements.data?.total || 0
      this.$refs.materialDetail.pageNum = resImplements.data?.pageNum || 1
      // 初始化高度没有获取到
      this.$nextTick(() => {
        const params = {
          height: this.$refs.getReceiveInfo.clientHeight,
          type: 'getReceiveInfo'
        }
        console.log(params, 'getReceiveInfo=>初始化发送高度')
        window.parent.postMessage(params, this.$fixIframeArr())
      })
    },
    async handleSearch(form) {
      if (
        this.query.manageMode === '03' ||
        this.query.manageMode === '04'
      ) {
        const res_ = await queryOsListWhole({
          prjId: this.query.prjId,
          ...form
        })
        if (+res_.code === 200) {
          this.updateRemoveData = res_.data?.osData
        }
        return
      }
      const res = await queryOsList({ prjId: this.query.prjId, ...form })
      if (+res.code === 200 && res.data) {
        this.updateRemoveData = res.data.osData
      } else {
        this.updateRemoveData = []
      }
    },
    async queryReceiveDetails(prjId) {
      const res = await queryReceiveDetails({
        prjId: prjId || this.query.prjId
      })
      if (+res.code === 200) {
        this.receiveDetailsData = res.data
        this.projectInfo = res.data.prjInfo
      }
    },
    handleMaterialApplication(type, title) {
      this.componentsType = type
      this.title = title
      this.materialsApplicationVisible = true
      this.dialogEl('materialsApplicationRef')
    },
    handleRemoveMaterial() {
      this.handleSearch(this.form)
    },
    dialogEl(refName) {
      // 将弹框挂载在最外层
      const contentBody = window.top.document.body
      this.$nextTick(() => {
        const dialogModal = document.querySelector('.v-modal')
        contentBody.appendChild(this.$refs[refName].$el)
        if (dialogModal) {
          contentBody.appendChild(dialogModal)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
html,
body {
  height: auto;
}

// .mainDetails{
//     margin-left:20px;
//     margin-right:20px;
// }
.el-collapse {
  margin-bottom: 20px;
}

.el-collapse-item {
  box-shadow: 0px 0px 6px 0px rgba(191, 192, 192, 0.52);
  /* 调整各个item之间的距离为20px */
  /* border: 1px; */
}

.el-collapse-item__wrap {
  padding: 0 20px;
  /* 为el-collapse-item的内容添加20像素的padding */
}

.el-collapse-item__header {
  padding-left: 20px;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0;
  font-weight: 600;
}

.item_icon {
  width: 6px;
  background: rgb(235, 75, 75);
  height: 15px;
  margin-right: 10px;
  border-radius: 10px;
}

.content-box {
  width: 100%;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 400;
  line-height: 25px;
}

.ml-5 {
  margin-left: 5px;
}

.font-remove-weight {
  font-weight: normal;
}

.operation-wrapper {
  position: relative;
  height: 25px;
  width: 100%;
  margin-bottom: 14px;

  .position-abs {
    position: absolute;
  }

  .abs-right {
    right: 0px;
  }
}
</style>
